<template>
    <div class="container">
       <div class="row">
         <div class="card-wrapper col-sm-4"  v-for="item in stories">
           <img :src="item.images[0]" class="img" alt="图片"/>
           <router-link class="hover" :to="{path: '/detail',params: { id: 123 }}">
             <div class="card-title">{{item.title}}</div>
           </router-link>
         </div>
       </div>
    </div>
</template>
<style>
      .card-wrapper{
        margin-top:30px;
        height:280px;
        position:relative;
        .img,.hover{
          width:300px;
          height:280px;
          position:absolute;
          top:0;
          left:50%;
          margin-left:-150px;
        }
        .hover{
          display:inline-block;
          color:#fff;
          font-weight:bold;
          background:rgba(0, 0, 0, 0.25);
          cursor:pointer;
           &:hover, &:focus, &:active {
              text-decoration: none;
              outline:2px solid #33a9d8;
           }
          .card-title{
             width:260px;
             position:absolute;
             top:210px;
             left:50%;
             margin-left:-130px;
             text-overflow: ellipsis;
             overflow: hidden;
             font-size:18px;
             line-height: 28px;
          }
        }
      }
</style>
<script>
    export default{
    data(){
        return{
            stories:{}
        }
    },
      created() {
        this.$http.get('/api/4/news/latest')
        .then(function(response){
                this.stories=response.body.stories;
                console.info(this.stories);
            },function(error){
               //error
             });
      }
    }
</script>
